<template>
  <div class="m-25 mt-65 agora">
    <div class="normal-box-mod">
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <div class="decorate-square"></div>
          <h2>考评记录</h2>
        </div>
      </div>

      <div class="normal-box-bd">
        <Card style="margin-bottom: 10px;">
          <div class="normal-list-page-hd clearfix">
            <Input placeholder="请输入区域名"
                   class="mr-10"
                   v-model="queryData.areaName"
                   style="width: 150px"
                   :clearable=true />
                    <Select v-model="queryData.status"
                    :clearable="true"
                    style="width: 200px">
              <Option v-for="item in statusList"
                      :value="item.id"
                      :key="item.id">{{ item.name }}</Option>
            </Select>
            <Button type="primary"
                    custom-icon="iconfont icon-chaxun"
                    size="small"
                    @click='getTableData'>查询</Button>
          </div>
        </Card>
        <div class="clearfix mb-20">
          <!-- <Button custom-icon="iconfont icon-fangkuai2"
                  type="primary"
                  size="small"
                  style="float:right"
                  @click="showCreateModal">添加</Button> -->
        </div>
        <div class="normal-list-page-mod">
          <Table border
                 :loading="list.loading"
                 :columns="list.columns"
                 :data="list.tableData">

          </Table>

        </div>
        <div class="normal-list-page-ft clearfix">
          <Page class="fr"
                :total="queryData.totalRecord"
                :page-size="queryData.pageSize"
                :current="queryData.page"
                @on-change="changePage"
                @on-page-size-change="onPageSizeChange"
                show-elevator
                show-total
                show-sizer></Page>
        </div>
      </div>
    </div>
    <!-- 图片 -->
    <Modal v-model="modal.pic.isShow"
           :loading="modal.pic.loading"
           :mask-closable="false"
           :title="modal.pic.title">
      <Carousel loop height="400px" v-if="modal.pic.isShow">
        <CarouselItem v-for="p in modal.pic.data"
                      :key="p">
          <div style="height:400px;width:100%;over-flow:hidden;text-align:center">
            <img :src="p"
                 alt=""
                 style="width:auto;height:100%">
          </div>

        </CarouselItem>
      </Carousel>
    </Modal>
    <!-- 记录 -->
    <Modal v-model="modal.record.isShow"
           :loading="modal.record.loading"
           :mask-closable="false"
           width="800px"
           fullscreen
           :title="modal.record.title">
      <Table border
             :loading="modal.record.loading"
             :columns="modal.record.columns"
             :data="modal.record.data">

      </Table>
    </Modal>
  </div>
</template>
<script>
import ReviewApi from '@/api/check/voReview.js'
import { Message } from 'view-design'
import submenu from './subMenu/record1.vue'
export default {
  data () {
    return {
      statusList: [
        {
          id: 0,
          name: '未审核'
        },
        {
          id: 1,
          name: '已审核'
        }
      ],
      queryData: {
        limit: 10,
        page: 1,
        totalRecord: 0
      },
      // 列表
      list: {
        loading: false,
        selections: [],
        // 列表展示数据
        tableData: [],
        // 表格表头
        columns: [
          // {
          //   type: 'selection',
          //   width: 50,
          //   align: 'center'
          // },
          /** 开始自动生成 */
          {
            title: 'id',
            key: 'id',
            align: 'center',
            minWidth: 100
          },
          {
            title: '考核小区',
            key: 'areaName',
            align: 'center',
            minWidth: 150
          },
          {
            title: '总分数',
            key: 'totalScore',
            align: 'center',
            minWidth: 100
          },
          //   {
          //     title: ' 加减分',
          //     key: 'suboraddScore',
          //     align: 'center',
          //     minWidth: 100
          //   },
          //   {
          //     title: '评分说明',
          //     key: 'ratingDescription',
          //     align: 'center',
          //     minWidth: 150
          //   },
          //   {
          //     title: '图片',
          //     key: 'picUrl',
          //     align: 'center',
          //     minWidth: 100,
          //     render: (h, params) => {
          //       return h('div', [
          //         h(
          //           'Button',
          //           {
          //             props: {
          //               type: 'primary',
          //               size: 'small'
          //             },
          //             style: {
          //               marginRight: '5px'
          //             },
          //             on: {
          //               click: () => {
          //                 if (params.row.picUrl.length) {
          //                   this.modal.pic.data = params.row.picUrl.split(',')
          //                   this.modal.pic.loading = false
          //                   this.modal.pic.isShow = true
          //                 } else {
          //                   this.$Notice.error({
          //                     title: '未添加图片!'
          //                   })
          //                 }
          //               }
          //             }
          //           },
          //           '查看图片'
          //         )
          //       ])
          //     }
          //   },
          {
            title: '考核详情',
            key: 'scoreRecord',
            align: 'center',
            minWidth: 100,
            render: (h, params) => {
              return h('div', [
                h(
                  'Button',
                  {
                    props: {
                      type: 'primary',
                      size: 'small'
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {
                        this.modal.record.data = JSON.parse(
                          params.row.scoreRecord
                        )
                        console.log(this.modal.record.data)
                        this.modal.record.loading = false
                        this.modal.record.isShow = true
                      }
                    }
                  },
                  '查看详情'
                )
              ])
            }
          },
          {
            title: '考核状态',
            key: 'status',
            align: 'center',
            minWidth: 100,
            render: (h, params) => {
              if (params.row.status) {
                return h('div', [
                  h(
                    'Button',
                    {
                      props: {
                        type: 'success',
                        size: 'small',
                        ghost: true
                      },
                      style: {
                        marginRight: '5px'
                      },
                      on: {
                        // click: () => {
                        //   this.show(params.index);
                        // },
                      }
                    },
                    '已审核'
                  )
                ])
              } else {
                return h('div', [
                  h(
                    'Button',
                    {
                      props: {
                        type: 'error',
                        size: 'small',
                        ghost: true
                      },
                      style: {
                        marginRight: '5px'
                      },
                      on: {
                        // click: () => {
                        //   this.show(params.index);
                        // },
                      }
                    },
                    '未审核'
                  )
                ])
              }
            }
          },
          {
            title: '提交时间',
            key: 'createTime',
            align: 'center',
            minWidth: 140
          },
          {
            title: '考核时间',
            key: 'insertTime',
            align: 'center',
            minWidth: 140
          },
          {
            title: '审核时间',
            key: 'updateTime',
            align: 'center',
            minWidth: 140
          },

          {
            title: '操作',
            align: 'center',
            minWidth: 150,
            render: (h, params) => {
              return h('div', [
                h(
                  'Button',
                  {
                    props: {
                      type: 'primary',
                      size: 'small',
                      disabled: !!params.row.status
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {
                        ReviewApi.review(params.row.id, {
                          id: params.row.id,
                          status: 1
                        }).then((res) => {
                          if (res.code == 0) {
                            this.$Notice.success({
                              title: '审核成功!'
                            })
                          } else {
                            this.$Notice.error({
                              title: res.message
                            })
                          }
                          this.getTableData()
                        })
                      }
                    }
                  },
                  '审核'
                )
              ])
            }
          }
        ]
      },
      modal: {
        pic: {
          isShow: false,
          loading: true,
          title: '审核图片',
          data: []
        },
        record: {
          isShow: false,
          loading: true,
          title: '详情记录',
          data: [],
          columns: [
            {
              title: '考核内容',
              key: 'name',
              align: 'center',
              minWidth: 150
            },
            {
              title: '考核项',
              type: 'expand',
              width: 100,
              align: 'center',
              render: (h, params) => {
                return this.$createElement(submenu, {
                  ref: 'child',
                  props: {
                    row: params.row
                  },
                  on: {
                    openUploadRow: (val) => {
                      this.getTableData()
                    }
                  }
                })
              }
            },
            {
              title: '用户得分',
              key: 'totalScore',
              align: 'center',
              minWidth: 100
            }
          ]
        }
      }
    }
  },
  created () {
    this.getTableData()
  },
  methods: {
    // 每页显示记录数变更
    onPageSizeChange (pageSize) {
      this.queryData.limit = pageSize
      this.getTableData()
    },

    // 换页
    changePage (page) {
      this.queryData.page = page
      this.getTableData()
    },
    // 获取列表
    async getTableData () {
      const that = this
      that.queryData.totalRecord = undefined
      ReviewApi.getPageList(that.queryData)
        .then((res) => {
          that.list.tableData = res.data.list
          that.queryData.totalRecord = res.data.totalRecord
          that.queryData.page = res.data.pageNum
          that.queryData.limit = res.data.pageSize
        })
        .catch((error) => {
          Message.error(error)
        })
      //   console.log(this.list)
    },
    showCreateModal () {
      this.modal.user.title = '添加人员'
      this.modal.user.type = 'create'
      this.modal.user.formData = {}
      this.modal.user.isShow = true
    },
    showUpdateModal (row) {
      UserApi.getDetail(row.id).then((res) => {
        this.modal.user.title = '修改人员'
        this.modal.user.type = 'update'
        this.modal.user.formData = res.data
        this.modal.user.isShow = true
      })
    },
    // 新建&修改
    postData () {
      const that = this
      that.$refs['systemFrom'].validate((valid) => {
        if (valid) {
          if (!that.modal.user.formData.id) {
            // 新建
            UserApi.add(that.modal.user.formData)
              .then((res) => {
                that.modal.user.isShow = false
                that.modal.user.loading = false
                if (!res.code) {
                  that.getTableData()
                  that.$Notice.success({
                    title: '保存成功!'
                  })
                } else {
                  that.$Notice.error({
                    title: res.message
                  })
                }
              })
              .catch((error) => {
                Message.error(error)
              })
          } else {
            // 修改
            UserApi.update(
              that.modal.user.formData.id,
              that.modal.user.formData
            )
              .then((res) => {
                that.modal.user.isShow = false
                that.modal.user.loading = false
                if (!res.code) {
                  that.getTableData()
                  that.$Notice.success({
                    title: '保存成功!'
                  })
                } else {
                  that.$Notice.error({
                    title: res.message
                  })
                }
              })
              .catch((error) => {
                Message.error(error)
              })
          }
        } else {
          that.modal.user.loading = false
          that.$nextTick(() => {
            that.modal.user.loading = true
          })
        }
      })
    },
    // 删除
    delData (id) {
      let that = this
      this.$Modal.confirm({
        title: '确认删除',
        content:
          '<p>您确认删除id为 <strong>' +
          id.toString() +
          '</strong> 的考核标准吗?</p><p>删除后将无法撤销，请谨慎操作！</p>',
        loading: true,
        onOk: () => {
          UserApi.del({
            ids: [id]
          }).then((res) => {
            this.$Modal.remove()
            if (!res.code) {
              this.$Notice.success({
                title: '删除成功'
              })
              that.getTableData()
            } else {
              this.$Notice.error({
                title: res.message
              })
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
table {
  width: 100%;
  border-collapse: collapse;
  > div {
    width: 100%;
    tr {
      width: 100%;
      vertical-align: middle;
      th {
        font-size: 1.5em;
        background: #f8f8f9;
      }
      td,
      th {
        box-sizing: border-box;
        padding: 5px 0;
        border: 1px solid #e8eaec;
      }
      .c0 {
        font-size: 1.5em;
        width: 4vw;
        background: #fff;
      }
      .c1 {
        font-size: 1.5em;
        width: 12vw !important;
        background: #fdfdfd;
      }
      .c2 {
        width: 20vw;
        font-size: 1.2em;
      }
      .c3 {
        width: 35vw;
        font-size: 1.2em;
      }
      .c4 {
        width: 15vw;
        font-size: 1.5em;
      }
    }
    tr:hover {
      background: #efefef !important;
      transition: all ease 0.5s;
    }
  }
}
</style>
